<!-- StatusIndicator.vue - 优化版本 -->
<template>
  <div class="status-indicator" :class="[typeClass, { 'has-description': description }]">
    <div class="status-content">
      <div class="status-icon">
        <el-icon v-if="type === 'loading'" class="rotating">
          <Loading />
        </el-icon>
        <el-icon v-else-if="type === 'success'">
          <Check />
        </el-icon>
        <el-icon v-else-if="type === 'error'">
          <Close />
        </el-icon>
        <el-icon v-else-if="type === 'warning'">
          <Warning />
        </el-icon>
        <el-icon v-else-if="type === 'info'">
          <InfoFilled />
        </el-icon>
      </div>

      <div class="status-text">
        <span class="status-title">{{ title }}</span>
        <span v-if="description" class="status-description">{{ description }}</span>
      </div>

      <!-- 进度条（如果需要显示进度） -->
      <div v-if="showProgress && progress !== undefined" class="status-progress">
        <el-progress
          :percentage="progress"
          :stroke-width="4"
          :show-text="false"
          :color="progressColor"
        />
      </div>
    </div>

    <!-- 处理时间显示 -->
    <div v-if="showDuration" class="status-duration">
      {{ formatDuration(currentDuration) }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { Loading, Check, Close, Warning, InfoFilled } from '@element-plus/icons-vue'

const props = defineProps({
  type: {
    type: String,
    default: 'info',
    validator: (value) => ['loading', 'success', 'error', 'warning', 'info'].includes(value)
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  progress: {
    type: Number,
    default: undefined
  },
  showProgress: {
    type: Boolean,
    default: false
  },
  duration: {
    type: Number,
    default: 0 // 0表示不自动消失
  },
  showDuration: {
    type: Boolean,
    default: false // 是否显示持续时间
  }
})

// 当前持续时间
const currentDuration = ref(0)
let durationTimer = null

// 计算样式类
const typeClass = computed(() => `status-${props.type}`)

// 计算进度条颜色
const progressColor = computed(() => {
  switch (props.type) {
    case 'loading': return '#409eff'
    case 'success': return '#67c23a'
    case 'error': return '#f56c6c'
    case 'warning': return '#e6a23c'
    default: return '#909399'
  }
})

// 格式化持续时间
const formatDuration = (seconds) => {
  if (seconds < 60) {
    return `${seconds}s`
  } else {
    const minutes = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${minutes}m ${secs}s`
  }
}

// 开始计时器
const startDurationTimer = () => {
  if (props.showDuration && props.type === 'loading') {
    durationTimer = setInterval(() => {
      currentDuration.value++
    }, 1000)
  }
}

// 停止计时器
const stopDurationTimer = () => {
  if (durationTimer) {
    clearInterval(durationTimer)
    durationTimer = null
  }
}

// 监听类型变化
watch(() => props.type, (newType, oldType) => {
  if (oldType === 'loading' && newType !== 'loading') {
    stopDurationTimer()
  } else if (newType === 'loading' && oldType !== 'loading') {
    currentDuration.value = 0
    startDurationTimer()
  }
})

// 组件挂载
onMounted(() => {
  if (props.type === 'loading') {
    startDurationTimer()
  }

  // 如果设置了自动消失时间
  if (props.duration > 0) {
    setTimeout(() => {
      // 可以发出事件让父组件处理消失逻辑
      // emit('dismiss')
    }, props.duration)
  }
})

// 组件卸载
onUnmounted(() => {
  stopDurationTimer()
})
</script>

<style scoped>
.status-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.3s ease;
  margin: 4px 0;
  border: 1px solid transparent;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.status-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.status-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.status-title {
  font-weight: 500;
  line-height: 1.2;
}

.status-description {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.2;
}

.status-progress {
  flex: 1;
  max-width: 80px;
  margin-left: 8px;
}

.status-duration {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 8px;
  flex-shrink: 0;
  font-family: monospace;
}

/* 不同状态的样式 */
.status-loading {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
  border-color: rgba(64, 158, 255, 0.2);
  color: #409eff;
}

.status-success {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1), rgba(103, 194, 58, 0.05));
  border-color: rgba(103, 194, 58, 0.2);
  color: #67c23a;
}

.status-error {
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.1), rgba(245, 108, 108, 0.05));
  border-color: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

.status-warning {
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.1), rgba(230, 162, 60, 0.05));
  border-color: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.status-info {
  background: linear-gradient(135deg, rgba(144, 147, 153, 0.1), rgba(144, 147, 153, 0.05));
  border-color: rgba(144, 147, 153, 0.2);
  color: #909399;
}

/* 旋转动画 */
.rotating {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 描述文本存在时的样式调整 */
.has-description .status-title {
  font-weight: 600;
}

/* 悬停效果 */
.status-indicator:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-loading:hover {
  border-color: rgba(64, 158, 255, 0.4);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.status-success:hover {
  border-color: rgba(103, 194, 58, 0.4);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.2);
}

.status-error:hover {
  border-color: rgba(245, 108, 108, 0.4);
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.2);
}

.status-warning:hover {
  border-color: rgba(230, 162, 60, 0.4);
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.2);
}

.status-info:hover {
  border-color: rgba(144, 147, 153, 0.4);
  box-shadow: 0 4px 12px rgba(144, 147, 153, 0.2);
}

/* 暗色模式适配 */
:global(.dark) .status-indicator {
  background: var(--el-bg-color-page);
  border-color: var(--el-border-color);
}

:global(.dark) .status-loading {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.15), rgba(64, 158, 255, 0.08));
}

:global(.dark) .status-success {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.15), rgba(103, 194, 58, 0.08));
}

:global(.dark) .status-error {
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.15), rgba(245, 108, 108, 0.08));
}

:global(.dark) .status-warning {
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.15), rgba(230, 162, 60, 0.08));
}

:global(.dark) .status-info {
  background: linear-gradient(135deg, rgba(144, 147, 153, 0.15), rgba(144, 147, 153, 0.08));
}

/* 移动端优化 */
@media (max-width: 768px) {
  .status-indicator {
    padding: 6px 10px;
    font-size: 12px;
  }

  .status-content {
    gap: 6px;
  }

  .status-icon {
    width: 14px;
    height: 14px;
  }

  .status-description {
    font-size: 11px;
  }

  .status-duration {
    font-size: 10px;
  }

  .status-progress {
    max-width: 60px;
  }
}
</style>
